<template>
    <div class="bg-login-bg min-h-screen bg-cover bg-center flex justify-center items-center">
        <el-card class="w-full max-w-md p-2 rounded-lg shadow-lg bg-white">
            <div class="text-center mb-5">
                <h2 class="text-xl font-bold">{{ isLogin ? '登录' : '注册账号' }}</h2>
                <p @click="toggleMode"
                    class="mt-2 text-blue-500 hover:text-blue-700 transition-colors underline text-sm cursor-pointer">
                    {{ isLogin ? '没有账号？点击注册' : '已有账号？点击登录' }}
                </p>
            </div>

            <el-form :model="form" status-icon ref="ruleFormRef" :rules="rules" label-width="120px"
                class="demo-ruleForm">
                <el-form-item label="用户名" prop="username">
                    <el-input v-model="form.username"></el-input>
                </el-form-item>
                <el-form-item label="密码" prop="password">
                    <el-input type="password" v-model="form.password" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item v-if="!isLogin" label="确认密码" prop="confirmPassword">
                    <el-input type="password" v-model="form.confirmPassword" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="handleSubmit(ruleFormRef)">
                        {{ isLogin ? '登录' : '注册' }}
                    </el-button>
                    <!-- <el-button @click="resetForm(ruleFormRef)">重置</el-button> -->
                </el-form-item>
            </el-form>
        </el-card>
    </div>
</template>

<script setup>
import { reactive, ref, watch } from 'vue'
import { ElMessage } from 'element-plus'
import { login } from '@/config/api';

import { useRouter } from 'vue-router';
const router = useRouter();
import { userStore } from '@/stores'
// 可以在组件中的任意位置访问 `store` 变量 ✨
const store = userStore()

const isLogin = ref(true)

const toggleMode = () => {
  isLogin.value = !isLogin.value;
  resetForm(ruleFormRef.value);
}

const form = reactive({
    loginType: 1000,
    username: '',
    password: ''
})

const rules = reactive({
  username: [
    { required: true, message: '请输入用户名', trigger: 'blur' },
  ],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' },
  ],
  confirmPassword: [
    { required: !isLogin, message: '请再次输入密码', trigger: 'blur' },
    {
      validator: (rule, value, callback) => {
        if (!isLogin && value !== form.password) {
          callback(new Error('两次输入密码不一致'));
        } else {
          callback();
        }
      },
      trigger: 'blur'
    }
  ]
})

watch(isLogin, (newVal) => {
  // 更新验证规则中的 confirmPwd 字段是否需要验证
  rules.confirmPassword[0].required = !newVal;
});

const ruleFormRef = ref()

const handleSubmit = (formEl) => {
  if (!formEl) return
  formEl.validate((valid) => {
    if (valid) {
    //   console.log(isLogin.value ? '提交登录!' : '提交注册!');
      // 这里可以添加实际的登录或注册逻辑
      login(form).then(res => {
        console.log('res ==> {}', res);
        if(res.code == 200){
            ElMessage.success('登录成功！')
            store.login(res.data)
            router.push('/')
        }
      })
    } else {
      console.log('error submit!')
      return false
    }
  })
}

const resetForm = (formEl) => {
  if (!formEl) return
  formEl.resetFields()
}
</script>

<style scoped>

</style>